<template>
	<view class="container">
		<block v-if="details && details.vd">
			<view class="video-section">
				<template v-if="videoError">
					<view class="video-error" @tap="retryVideo">
						<image :src="details.img" mode="aspectFill" class="video-poster"></image>
						<view class="error-text">视频加载失败，点击重试</view>
					</view>
				</template>
				<template v-else>
					<video
						:src="details.vd"
						:poster="details.img"
						:controls="true"
						:show-center-play-btn="true"
						:enable-progress-gesture="true"
						:show-fullscreen-btn="true"
						:initial-time="0"
						:loop="false"
						:muted="false"
						:direction="0"
						:show-mute-btn="true"
						:enable-play-gesture="true"
						:auto-pause-if-navigate="true"
						:auto-pause-if-open-native="true"
						:vslide-gesture="true"
						:vslide-gesture-in-fullscreen="true"
						class="video"
						autoplay="true"
						@error="handleVideoError"
						@loadedmetadata="handleVideoLoad"
					></video>
				</template>
			</view>
		</block>
		
		<view class="info-section" v-if="details.nm">
			<image :src="details.img" mode="aspectFill" class="poster"></image>
			<view class="info">
				<view class="title">{{details.nm}}</view>
				<view class="rating" v-if="details.sc">
					<text class="score">{{details.sc}}</text>
					<text class="max">分</text>
				</view>
				<view class="type">{{details.cat}}</view>
				<view class="duration">{{details.src}} / {{details.dur}}分钟</view>
				<view class="pubDesc">{{details.pubDesc}}</view>
			</view>
		</view>
		
		<!-- 评分卡片 -->
		<view class="rating-card" v-if="details.sc || details.wish">
			<view class="rating-content" v-if="details.sc">
				<view class="big-score">{{details.sc}}</view>
				<view class="rating-info">
					<text class="rating-label">猫眼评分</text>
					<text class="rating-count">{{details.snum}}人评分</text>
				</view>
			</view>
			<view class="rating-content" v-else-if="details.wish">
				<view class="big-wish">{{details.wish}}</view>
				<view class="rating-info">
					<text class="rating-label">想看人数</text>
				</view>
			</view>
		</view>

		<!-- 剧照轮播 -->
		<view class="photos-section" v-if="details.photos && details.photos.length">
			<view class="section-title">剧照</view>
			<swiper class="photos-swiper" circular autoplay interval="3000">
				<swiper-item v-for="(photo, index) in details.photos" :key="index" @tap="previewImage(photo)">
					<image :src="photo" mode="aspectFill" class="photo-item"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 电影简介 -->
		<view class="plot-section" v-if="details.dra">
			<view class="section-title">剧情简介</view>
			<view class="plot-content">{{details.dra}}</view>
		</view>
		
		<!-- 跳转到猫眼按钮 -->
		<view class="maoyan-btn" @tap="goToMaoyan">
			前往猫眼
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const details = ref({})
const loading = ref(false)
const videoError = ref(false)

// 获取电影详情
async function getDetails(movieId) {
	if (!movieId) {
		uni.showToast({
			title: '参数错误',
			icon: 'none'
		})
		return
	}
	
	loading.value = true
	
	try {
		const res = await uni.request({
			url: '/api/movie/ajax/detailmovie',
			data: { movieId },
			method: 'GET'
		})
		
		console.log('API Response:', res)
		
		if (res.statusCode === 200 && res.data && res.data.detailMovie) {
			details.value = res.data.detailMovie
			console.log('视频数据：', details.value.vd)
			
			// 设置导航栏背景色和页面背景色
			if (details.value.backgroundColor) {
				const bgColor = details.value.backgroundColor
				uni.setNavigationBarColor({
					frontColor: "#ffffff",
					backgroundColor: bgColor
				})
			}
			
			// 设置导航栏标题
			if (details.value.nm) {
				uni.setNavigationBarTitle({
					title: details.value.nm
				})
			}
		} else {
			throw new Error('获取数据失败')
		}
	} catch (error) {
		console.error('获取电影详情失败：', error)
		uni.showToast({
			title: '获取详情失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 预览剧照
function previewImage(current) {
	if (details.value.photos) {
		uni.previewImage({
			urls: details.value.photos,
			current
		})
	}
}

// 跳转到猫眼
function goToMaoyan() {
  uni.showToast({
    title: '该功能待开发',
    icon: 'none',
    duration: 2000
  })
}

// 处理视频错误
function handleVideoError(e) {
	console.error('视频加载错误：', e)
	videoError.value = true
	
	// 显示错误信息
	uni.showToast({
		title: '视频加载失败',
		icon: 'none'
	})
}

// 处理视频加载成功
function handleVideoLoad() {
	console.log('视频加载成功')
	videoError.value = false
}

// 重试加载视频
function retryVideo() {
	videoError.value = false
	
	// 显示加载提示
	uni.showToast({
		title: '正在重新加载',
		icon: 'loading'
	})
}

onMounted(() => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const movieId = currentPage.options?.id
	
	if (movieId) {
		getDetails(movieId)
	} else {
		uni.showToast({
			title: '参数错误',
			icon: 'none'
		})
	}
})
</script>

<style>
.container {
	min-height: 100vh;
	padding: 10px;
	background-color: #fff;
}

.video-section {
	width: 100%;
	height: 400rpx;
	margin-bottom: 20px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #000;
}

.video {
	width: 100%;
	height: 100%;
}

.video-error {
	width: 100%;
	height: 100%;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-poster {
	width: 100%;
	height: 100%;
	opacity: 0.5;
}

.error-text {
	color: #fff;
	font-size: 14px;
	background: #000;
	padding: 10px;
	border-radius: 5px;
}

.info-section {
	display: flex;
	gap: 15px;
	padding: 10px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #000;
	margin-bottom: 20px;
}

.poster {
	width: 120px;
	height: 160px;
	border-radius: 8px;
	overflow: hidden;
}

.info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.title {
	font-size: 18px;
	font-weight: bold;
	color: #ff2756;
}

.rating {
	margin-bottom: 10px;
}

.score {
	font-size: 18px;
	color: #ff2756;
}

.max {
	font-size: 14px;
	color: #ff2756;
}

.type, .duration, .pubDesc {
	font-size: 14px;
	color: #666;
}

.rating-card {
	padding: 10px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #000;
	margin-bottom: 20px;
}

.rating-content {
	display: flex;
	gap: 15px;
}

.big-score {
	font-size: 24px;
	color: #ff2756;
}

.rating-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rating-label {
	font-size: 14px;
	color: #666;
}

.rating-count {
	font-size: 14px;
	color: #666;
}

.photos-section {
	margin-bottom: 20px;
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.section-title::before {
	content: "";
	width: 4px;
	height: 16px;
	background-color: #ff2756;
	border-radius: 2px;
	margin-right: 8px;
}

.section-title {
	font-size: 18px;
	font-weight: bold;
	color: #ff2756;
}

.photos-swiper {
	height: 320rpx;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #000;
}

.photo-item {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plot-section {
	padding: 10px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid #000;
	margin-bottom: 20px;
}

.plot-content {
	font-size: 14px;
	color: #666;
	line-height: 1.5;
}

.maoyan-btn {
	width: 90%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #ff2756;
	color: #fff;
	border-radius: 20px;
	margin: 20px auto;
	font-size: 14px;
}
</style>